<template>
	<view class="edit-page" :style="{ backgroundImage: `url(${'https://m.lqvvvv.com'+backimg})` }">
		<u-navbar :autoBack="true" title="编辑资料" :placeholder="true" bgColor="rgba(255,255,255,0)">
		</u-navbar>
		
		<view style="height: 270rpx; position: relative;">
			<view class="replace" @click="upfun(2)">
				更换背景
			</view>
		</view>
		<view class="content">
			
			<view class="head-box">
				<view class="head">
					<view class="head-info">
						<view class="head-item">
							<view class="avatar-container" :style="{
						      backgroundImage: 'url(' + (info.avatar 
						        ? (info.avatar.startsWith('http') ? info.avatar : 'https://m.lqvvvv.com' + info.avatar)
						        : 'https://m.lqvvvv.com/assets/static/index/head.png') + ')'
						    }">
								<image class="avatar-frame" :src="'https://m.lqvvvv.com' + info.avatar_round"
									mode="aspectFit" style="width: 115%; height: 115%; top: -7.5%; left: -7.5%;"></image>
							</view>
						</view>
					</view>
					<view class="edit">
						<u-icon name="edit-pen" color="#fff" size="16"></u-icon>
						<view class="edit-text" @click="upfun(1)">
							更改头像
						</view>
					</view>
				</view>
			</view>
			<view class="info-box">
				<view class="info-item" @click="gotxk">
					<view class="item-title">
						更改头像框
					</view>
					<view class="info-right">
						<image :src="'https://m.lqvvvv.com' + info.avatar_round"  mode=""></image>
						<u-icon name="arrow-right" color="#8B8DA0" size="16"></u-icon>
					</view>
				</view>
				<view class="info-item">
					<view class="item-title">
						昵称
					</view>
					<view class="info-right">
						<view class="item-text">
							<u-input v-model="name" placeholder="" border="none" inputAlign="right"></u-input>
						</view>
					</view>
				</view>
				<view class="info-item" @click="openList(1)">
					<view class="item-title">
						年龄
					</view>
					<view class="info-right">
						<view class="item-text">
							<u-input v-model="age" placeholder="" border="none" inputAlign="right" readonly></u-input>
						</view>
						<u-icon name="arrow-right" color="#8B8DA0" size="16"></u-icon>
					</view>
				</view>
				<view class="info-item"> 
					<view class="item-title">
						性别
					</view>
					<view class="sex">
						<view :class="item.show == true?'activity-item':''" class="sex-item"
							v-for="(item,index) in sexList" :key="index" @click="cutSex(index)">
							<image :src="item.img" mode=""></image>
							<view class="sex-text">
								{{item.text}}
							</view>
						</view>
					</view>
				</view>
				<view class="info-item" @click="openList(2)">
					<view class="item-title">
						身高
					</view>
					<view class="info-right">
						<view class="item-text">
							<u-input v-model="height" placeholder="" border="none" inputAlign="right"
								readonly></u-input>
						</view>
						<u-icon name="arrow-right" color="#8B8DA0" size="16"></u-icon>
					</view>
				</view>
				<view class="info-item" @click="openList(3)">
					<view class="item-title">
						体重
					</view>
					<view class="info-right">
						<view class="item-text">
							<u-input v-model="weight" placeholder="" border="none" inputAlign="right"
								readonly></u-input>
						</view>
						<u-icon name="arrow-right" color="#8B8DA0" size="16"></u-icon>
					</view>
				</view>
				<view class="info-item">
					<view class="autograph">
						<view class="autograph-title">
							个性签名
						</view>
						<view class="autograph-text">
							<u-input maxlength="20" v-model="autograph" placeholder="请输入您的个性签名" border="none"
								inputAlign="left"></u-input>
						</view>
					</view>
				</view>
				<view class="title">
					我的相册
				</view>
				<view>
					<u-upload :fileList="fileList1" :previewFullImage="true" width="179rpx" height="179rpx"
						@afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9"
						uploadIconColor="#c6cafa"></u-upload>
				</view>
				<view class="title">
					我的视频
				</view>
				<view class="upload-item" v-if="video==''" @click="goupvideo">
					<image src="https://m.lqvvvv.com/assets/static/my/upicon2.png" mode=""></image>
				</view>
				<video style="width: 179rpx; height: 179rpx;" :controls="false" v-if="video!=''"
					:src="'https://m.lqvvvv.com'+video"></video>
				<view style="width: 179rpx;" v-if="video!=''" @click="goupvideo">
					<u-button type="primary" color="#5755F2" size="mini" text="重新上传"></u-button>
				</view>
				<view class="btn">
					<u-button @click="goup" shape="circle" size="large"
						color="linear-gradient( 90deg, #C58AF0 0%, #6272ED 100%)" type="primary" text="确认修改"></u-button>
				</view>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" :defaultIndex="defaultIndex" @cancel="show = false"
			@confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				age: '',
				height: '',
				weight: '',
				autograph: '',
				avatar: '',
				backimg: '',
				sexList: [{
						text: '男生',
						img: 'https://m.lqvvvv.com/assets/static/index/male1.png',
						show: true
					},
					{
						text: '女生',
						img: 'https://m.lqvvvv.com/assets/static/index/female0.png',
						show: false
					}
				],
				gender: 1,
				info: {},
				show: false,
				columns: [
					[]
				],
				defaultIndex: [0],
				type: 1,
				// 1 年龄  2.身高 3.体重
				fileList1: [],
				video: '',
			}
		},
		onShow() {
			this.getuserinfo()
		},
		methods: {
			gotxk(){
				uni.navigateTo({
					url:'/pages/my/rank/exchange'
				})
			},
			upfun(type) {
				const app = this
				uni.chooseImage({
					count: 1, //默认1
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: async function(res) {
						uni.showLoading({
							mask:true,
							title:'上传中'
						})
						console.log(res)
						const result = await app.uploadFilePromise(res.tempFilePaths[0])
						uni.hideLoading()
						if (type == 1) {
							app.avatar = result
						} else {
							app.backimg = result
						}
					},
				});
			},
			cutSex(index) {
				this.sexList.map(item => {
					item.show = false
				})
				this.sexList[index].show = true
				if (this.sexList[index].text == '男生') {
					this.gender = 1
				} else {
					this.gender = 2
				}
			},
			getuserinfo() {
				this.$Request({
					method: 'POST',
					url: '/api/user/getMyInfo',
					data: {},
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data
						this.name = this.info.nickname
						this.age = this.info.age + '岁'
						this.height = this.info.height + 'cm'
						this.autograph = this.info.intro
						this.gender = this.info.gender
						this.weight = this.info.weight + 'kg'
						this.avatar = this.info.avatar
						this.backimg = this.info.background_image
						this.video = this.info.videos
						if (this.info.photos != '') {
							this.fileList1 = this.info.photos.split(',').map(url => ({
								url: `https://m.lqvvvv.com${url}`
							}));
						}
						this.sexList.map(item => {
							item.show = false
						})
						if (this.info.gender == 1) {
							this.sexList[0].show = true
						} else {
							this.sexList[1].show = true
						}
					}
				})
			},
			confirm(e) {
				console.log(e.value[0])
				if (this.type == 1) {
					this.age = e.value[0]
				}
				if (this.type == 2) {
					this.height = e.value[0]
				}
				if (this.type == 3) {
					this.weight = e.value[0]
				}
				if (this.type == 4) {
					this.time = e.value[0]
				}
				this.show = false
			},
			openList(num) {
				this.type = num
				this.defaultIndex = [0]
				if (num == 1) {
					// 初始化年龄数组
					let ageArray = [];

					// 从 50kg 到 70kg 生成体重数据
					for (let age = 18; age <= 50; age += 1) { // 这里以 1kg 为步长生成体重数据
						ageArray.push(`${age}岁`);
					}

					// 更新 columns
					this.columns = [ageArray];
				}
				if (num == 2) {
					// 初始化空数组
					let heightArray = [];

					// 从 150 cm 到 190 cm 生成身高数据
					for (let cm = 150; cm <= 190; cm += 1) {
						heightArray.push(`${cm}cm`);
					}

					// 更新 columns
					this.columns = [heightArray];
				}
				if (num == 3) {
					// 初始化体重数组
					let weightArray = [];

					// 从 50kg 到 70kg 生成体重数据
					for (let kg = 40; kg <= 80; kg += 1) { // 这里以 1kg 为步长生成体重数据
						weightArray.push(`${kg}kg`);
					}

					// 更新 columns
					this.columns = [weightArray];
				}
				this.show = true
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://m.lqvvvv.com/api/common/upload',
						filePath: url,
						name: 'file',
						header: {
							token: uni.getStorageSync("token") || '',
						},
						success: (res) => {
							let info = JSON.parse(res.data)
							if(info.code == 1){
								setTimeout(() => {
									resolve(info.data.url)
								}, 1000)
							}else{
								uni.showToast({
									title: info.msg,
									icon: 'none'
								})
							}	
						}
					});
				})
			},
			goupvideo() {
				let app = this
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {
						console.log(res.tempFilePath)
						uni.showLoading({
							title: '上传中...',
							mask: true
						})
						uni.uploadFile({
							url: 'https://m.lqvvvv.com/api/common/upload', // 仅为示例，非真实的接口地址
							filePath: res.tempFilePath,
							name: 'file',
							header: {
								token: uni.getStorageSync("token") || '',
							},
							success: (res1) => {
								uni.hideLoading()
								let info = JSON.parse(res1.data)
								if (info.code == 1) {
									app.video = info.data.url
								}
							}
						});
					}
				});
			},
			goup() {
				if (this.backimg == '') {
					uni.showToast({
						title: '请上传您的背景图！',
						icon: 'none'
					})
					return
				}
				if (this.avatar == '') {
					uni.showToast({
						title: '请上传您的头像！',
						icon: 'none'
					})
					return
				}
				if (this.name == '') {
					uni.showToast({
						title: '请输入您的昵称！',
						icon: 'none'
					})
					return
				}
				if (this.age == '') {
					uni.showToast({
						title: '请选择您的年龄！',
						icon: 'none'
					})
					return
				}
				if (this.height == '') {
					uni.showToast({
						title: '请选择您的身高！',
						icon: 'none'
					})
					return
				}
				if (this.weight == '') {
					uni.showToast({
						title: '请选择您的体重！',
						icon: 'none'
					})
					return
				}
				if (this.autograph == '') {
					uni.showToast({
						title: '请输入您的个性签名！',
						icon: 'none'
					})
					return
				}
				if (this.fileList1.length < 1) {
					uni.showToast({
						title: '请上传我的相册！',
						icon: 'none'
					})
					return
				}
				if (this.video == '') {
					uni.showToast({
						title: '请上传介绍视频！',
						icon: 'none'
					})
					return
				}
				console.log(this.fileList1)
				let params = {
					background_image: this.backimg, //个人背景图
					nickname: this.name,
					avatar: this.avatar,
					intro: this.autograph,
					gender: this.gender,
					age: this.age.replace(/岁/g, ''),
					height: this.height.replace(/cm/g, ''),
					weight: this.weight.replace(/kg/g, ''),
					videos: this.video,
					photos: ''
				}
				params.photos = this.fileList1.map(item => item.url.replace('https://m.lqvvvv.com', '')).join(',');
				uni.showLoading({
					mask: true
				})
				this.$Request({
					method: 'POST',
					url: '/api/user/profile',
					data: params,
					ismsg: true,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.getuserinfo()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.edit-page {
		min-height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% 400rpx;

		.replace {
			padding: 10rpx 30rpx;
			background-color: rgba(12, 12, 12, 0.13);
			border-radius: 30rpx;
			font-size: 28rpx;
			color: #fff;
			position: absolute;
			right: 20rpx;
			bottom: 60rpx;
		}

		.content {
			padding: 30rpx;
			background-color: #fff;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			position: relative;

			.head-box {
				position: absolute;
				top: -95rpx;
				left: 50rpx;

				.head {
					position: relative;

					.head-info {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 180rpx;
						height: 180rpx;
					
						.head-item {
							/* 外层容器尺寸根据实际情况调整 */
							width: 180rpx;
							height: 180rpx;
						}
					
						.avatar-container {
						  position: relative;
						  width: 180rpx;
						  height: 180rpx;
						  background-repeat: no-repeat;
						  background-size: 100% 100%;
						  /* 关键：移除裁剪 */
						  overflow: visible;
						  border-radius: 50%; /* 如果需要圆形 */
						}
						
						.avatar-frame {
						  position: absolute;
						  z-index: 2;
						  pointer-events: none;
						}
					
					}

					.edit {
						position: absolute;
						bottom: -15rpx;
						left: 0;
						right: 0;
						background-color: #5755F2;
						border-radius: 30rpx;
						display: flex;
						justify-content: center;
						font-size: 20rpx;
						padding: 10rpx 5rpx;
						z-index: 99;
						color: #fff;

						.edit-text {
							margin-left: 10rpx;
						}
					}
				}
			}

			.info-box {
				margin-top: 100rpx;

				.info-item {
					background-color: #F7F8FC;
					padding: 30rpx;
					border-radius: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30rpx;

					.item-title {
						font-size: 28rpx;
						color: #000000;
						font-weight: bold;
					}

					.info-right {
						display: flex;
						align-items: center;
						image{
							width: 80rpx;
							height: 80rpx;
						}
						.item-text {
							margin-right: 20rpx;
							font-size: 24rpx;
							color: #999;
						}
					}

					.sex {
						display: flex;

						.sex-item {
							display: flex;
							align-items: center;
							background-color: #DEDEDE;
							padding: 10rpx 20rpx;
							border-radius: 30rpx;
							color: #9E9E9E;
							margin-left: 20rpx;

							image {
								width: 25rpx;
								height: 25rpx;
								margin-right: 10rpx;
							}

							.sex-text {
								font-size: 24rpx;
							}
						}

						.activity-item {
							background-color: #4983F2;
							color: #fff;
						}
					}

					.right-input {
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}

					.autograph {
						.autograph-title {
							font-size: 28rpx;
							color: #000000;
							font-weight: bold;
						}

						.autograph-text {
							margin-top: 20rpx;
						}
					}
				}

				.title {
					font-size: 32rpx;
					color: #000000;
					font-weight: bold;
					padding: 20rpx 0;
				}

				.upload-item {
					width: 179rpx;
					height: 179rpx;
					background-color: #F7F8FC;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
					margin: 20rpx 0;

					image {
						width: 55rpx;
						height: 53.58rpx;
					}
				}

				.btn {
					padding: 30rpx;
					margin-top: 40rpx;
				}
			}
		}
	}
</style>